<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Questrial&family=Roboto:wght@500&display=swap" rel="stylesheet" />
<link rel="icon" href="./icon.png" />
<meta property="og:description" content="NeoPOP Design System by CRED" />
<meta property="og:title" content="CRED Design System" />
<title>NeoPOP Design System</title>
<style>
    body {
        font-family: 'Roboto', sans-serif;
    }

    #storybook-explorer-searchfield {
        border-radius: 0;
        background: #0d0d0d;
        margin-bottom: 15px;
    }

    #components, #foundation {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 10px 0 0 20px;
    }

    .sidebar-subheading button {
        color: #fff;
        margin-bottom: 5px;
    }

    .sidebar-header div a img {
        width: 30px;
    }

    #storybook-explorer-menu {
        font-family: 'Questrial', sans-serif;
        font-family: 'Roboto', sans-serif;
        padding: 0 15px;
    }

    #storybook-explorer-menu a[data-selected="true"],
    #storybook-explorer-menu a[data-selected="true"]:hover {
        background-color: #fff;
        color: #0d0d0d;
    }

    #storybook-explorer-menu svg {
        color: #fff;
        margin-top: 1.5px;
    }

    #storybook-explorer-menu a[data-selected="true"] svg {
        color: #0d0d0d;
        margin-top: 1.5px;
    }

    #storybook-explorer-menu button, a {
        margin-top: 4px;
    }
</style>